<template>
    <div style="height: 100%;">
        <el-tree style="height: 100%;" :allow-drop="allowDrop" :allow-drag="allowDrag" :data="data" draggable default-expand-all
            node-key="id" @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter"
            @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd"
            @node-drop="handleDrop" />
    </div>
</template>
<script>

export default {
    name: 'BlogMenuTree',
    data() {
        return {
            data: [
                {
                    label: 'Level one 1',
                    children: [
                        {
                            label: 'Level two 1-1',
                            children: [
                                {
                                    label: 'Level three 1-1-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'Level one 2',
                    children: [
                        {
                            label: 'Level two 2-1',
                            children: [
                                {
                                    label: 'Level three 2-1-1',
                                },
                            ],
                        },
                        {
                            label: 'Level two 2-2',
                            children: [
                                {
                                    label: 'Level three 2-2-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'Level one 3',
                    children: [
                        {
                            label: 'Level two 3-1',
                            children: [
                                {
                                    label: 'Level three 3-1-1',
                                },
                            ],
                        },
                        {
                            label: 'Level two 3-2',
                            children: [
                                {
                                    label: 'Level three 3-2-1',
                                },
                            ],
                        },
                    ],
                },
            ],
            expandedKeys: [],
            defaultProps: {
                children: 'children',
                label: 'title'
            }
        }
    },
    methods: {
        handleDragStart(node, ev) {
            console.log('drag start', node)
        },
        handleDragEnter(draggingNode, dropNode, ev) {
            console.log('tree drag enter:', dropNode.label)
        },
        handleDragLeave(draggingNode, dropNode, ev) {
            console.log('tree drag leave:', dropNode.label)
        },
        handleDragOver(draggingNode, dropNode, ev) {
            console.log('tree drag over:', dropNode.label)
        },
        handleDragEnd(draggingNode, dropNode, dropType, ev) {
            console.log('tree drag end:', dropNode && dropNode.label, dropType)
        },
        handleDrop(draggingNode, dropNode, dropType, ev) {
            console.log('tree drop:', dropNode.label, dropType)
        },
        allowDrop(draggingNode, dropNode, type) {
            if (dropNode.data.label === 'Level two 3-1') {
                return type !== 'inner'
            } else {
                return true
            }
        },
        allowDrag(draggingNode) {
            return !draggingNode.data.label.includes('Level three 3-1-1')
        }
    },
    mounted() { },
}


</script>